<template>
  <div class="PackageListDetail">
    <el-row>
      <el-col :span="4" :offset="3">
        <div class="div_border_title">
          <h2>在线预定</h2>
        </div>
      </el-col>
      <el-col :span="18" :offset="3">
        <div style="margin:1em auto;">
          <el-steps :space="350" :active="step" finish-status="success" :center="true">
            <el-step title="步骤1" description="选择套餐"></el-step>
            <el-step title="步骤2" description="确认订单"></el-step>
            <el-step title="步骤3" description="支付"></el-step>
          </el-steps>
        </div>
        <div v-if="step === 0">
          <div class="listData" v-for="(item,index) in packageList" :key="index">
            <PackageCard :packageData="item.id" @returnBuy="getInfo"></PackageCard>
          </div>
        </div>
        <div v-if="step === 1">
          <PackageOrderDetail :packageData="this.bookPackageId" @returnStep="getPackageOrder"></PackageOrderDetail>
        </div>
        <div v-if="step === 2">
          <OrderPayments :orderInfo="payData" @returnOrder="getPayInfo"></OrderPayments>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/javascript">
  import OrderPayments from '@/components/paymentDetails/OrderPayments'
  import PackageCard from '@/components/packageManagement/PackageCard'
  import PackageOrderDetail from '@/components/packageManagement/PackageOrderDetail'
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'PackageListDetail',
    data () {
      return {
        packageList: [],
        step: 0,
        bookPackageId: '',
        payData: {
          bookId: '',
          key: 'PACKAGE_ORDER_GET',
        }
      }
    },
    created () {
      this.getPackageList()
    },
    methods: {
      //第一步返回信息
      getInfo (state) {
        this.addBookPackage(state.packageId)
      },
      //第二步返回信息
      getPackageOrder (state) {
        if (state === false) {
          this.step--
        } else if (state === true) {
          this.payData.bookId = this.bookPackageId
          this.step++
        }
      },
      //第三步返回信息
      getPayInfo (state) {
        console.log(state)
        if (state === true) {
          this.$router.push({'path': '/index/packagepurchaselist'})
          // this.joinUseList(state.package_id,state.order_id);
        }
      },
      joinUseList (packageID, orderID) {
        let _this = this
        let params = new Object()
        params.package_id = packageID
        params.order_id = orderID
        params.use_state = 1
        console.log(params)
        postDataToServer('PACKAGE_ORDER_USE_BYPACKID_ADD', params).then((data) => {
          if (data.status === 0) {
            _this.$router.push({'path': '/index/packagepurchaselist'})
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      //加入订单
      addBookPackage (packageId) {
        let _this = this
        let params = new Object()
        params.package_id = packageId
        postDataToServer('PACKAGE_ORDER_ADD', params).then((data) => {
          if (data.status === 26) {
            this.bookPackageId = data.message
            this.step++
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      getPackageList () {
        let _this = this
        let params = new Object()
        params.page_no = 1
        params.page_size = 20
        params.is_publish = 0
        postDataToServer('PACKAGE_LISTPAGE', params).then((data) => {
          if (data.status === 0) {
            this.packageList = data.data_list
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },

    },
    components: {
      OrderPayments,
      PackageCard,
      PackageOrderDetail
    }
  }
</script>
<style scoped>
  .PackageListDetail {
    padding-top: 2em;
  }

  .listData {
    width: 50%;
    margin-top: 1.6em;
    display: inline-block;
  }
</style>
